<!DOCTYPE html>
<html>
<head>
	<title>progress</title>
	<meta charset="utf-8" />
	<style type="text/css">
		body{margin: 0;}
	    .progress {  
	      overflow: hidden;  
	      height: 20px;  
	      margin-bottom: 20px;  
	      margin-top: 20px;  
	      margin-left: 30px;  
	      background-color: #f7f7f7;  
	      background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9);  
	      background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));  
	      background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9);  
	      background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9);  
	      background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9);  
	      background-repeat: repeat-x;  
	      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0);  
	      -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);  
	      -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);  
	      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);  
	      -webkit-border-radius: 4px;  
	      -moz-border-radius: 4px;  
	      border-radius: 4px;  
	      width:408px;  
	      margin-right:12px;  
	    }  

	    .progress .bar {  
	      width: 0%;  
	      height: 100%;  
	      color: #ffffff;  
	      float: left;  
	      font-size: 12px;  
	      text-align: center;  
	      align-items: center;  
	      display: flex;  
	      justify-content: center;  
	      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);  
	      background-color: #0e90d2;  
	      background-image: -moz-linear-gradient(top, #149bdf, #0480be);  
	      background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be));  
	      background-image: -webkit-linear-gradient(top, #149bdf, #0480be);  
	      background-image: -o-linear-gradient(top, #149bdf, #0480be);  
	      background-image: linear-gradient(to bottom, #149bdf, #0480be);  
	      background-repeat: repeat-x;  
	      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0);  
	      -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);  
	      -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);  
	      box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);  
	      -webkit-box-sizing: border-box;  
	      -moz-box-sizing: border-box;  
	      box-sizing: border-box;  
	      -webkit-transition: width 0.6s ease;  
	      -moz-transition: width 0.6s ease;  
	      -o-transition: width 0.6s ease;  
	      transition: width 0.6s ease;  
	    } 

	    .progress-verticle {  
	      overflow: hidden;  
	      height: 400px;  
	      margin-bottom: 20px;  
	      margin-top: 20px;  
	      margin-left: 30px;  
	      background-color: #f7f7f7;  
	      background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9);  
	      background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));  
	      background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9);  
	      background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9);  
	      background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9);  
	      background-repeat: repeat-x;  
	      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0);  
	      -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);  
	      -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);  
	      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);  
	      -webkit-border-radius: 4px;  
	      -moz-border-radius: 4px;  
	      border-radius: 4px;  
	      width:30px;  
	      margin-right:12px;
	      display: flex;  
	      align-content: flex-end; 
	    }  

	    .progress-verticle .bar-v {  
	      width: 100%;  
	      height: 0%;  
	      color: #ffffff;  
	      /*float: left;  */
	      font-size: 12px;  
	      text-align: center;  
	      align-items: flex-end;  
	      display: flex;  
	      justify-content: center;
	      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);  
	      background-color: #0e90d2;  
	      background-image: -moz-linear-gradient(top, #149bdf, #0480be);  
	      background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be));  
	      background-image: -webkit-linear-gradient(top, #149bdf, #0480be);  
	      background-image: -o-linear-gradient(top, #149bdf, #0480be);  
	      background-image: linear-gradient(to bottom, #149bdf, #0480be);  
	      background-repeat: repeat-x;  
	      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0);  
	      -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);  
	      -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);  
	      box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);  
	      -webkit-box-sizing: border-box;  
	      -moz-box-sizing: border-box;  
	      box-sizing: border-box;  
	      -webkit-transition: width 0.6s ease;  
	      -moz-transition: width 0.6s ease;  
	      -o-transition: width 0.6s ease;  
	      transition: width 0.6s ease; 
	    }  
	</style>
</head>
<body>

 <div class="progress">  
    <span class="bar" style="width: 40%;">40%</span>  
 </div> 

 <div class="progress-verticle">  
    <span class="bar-v" style="height: 40%; margin-top: 240px;">40%</span>  
 </div>  


</body>
</html>